<template>
  <view class="container">
    <!-- top area -->
    <!--     <view class="header">
      <view class="left">
        <u-avatar
          size="50"
          :src="
            userInfo && userInfo.FAvatarUrl
              ? userInfo.FAvatarUrl
              : '/static/images/user_pic.png'
          "
        />
      </view>
      <view class="right">
        <view class="top">{{ `>` }}</view>
        <view class="bottom">
          <view class="left">
            <view>优惠券</view>
            <view style="color: red">{{ m_couponList.length }}张</view>
          </view>
          <view class="right"></view>
        </view>
      </view>
    </view> -->
    <view class="grid-container">
      <view class="grid-item">
        <u-avatar
          size="55"
          :src="
            userInfo && userInfo.FAvatarUrl
              ? userInfo.FAvatarUrl
              : '/static/images/user_pic.png'
          "
        />
      </view>
      <view class="grid-item grid-login" v-if="!hasLogin" v-on:tap="onLC"
        >立即登录</view
      >
      <view class="grid-item grid-has-login" v-else>
        <view class="phone">{{
          memberInfo.Number.slice(0, 3) + "****" + memberInfo.Number.slice(7)
        }}</view>
        <view class="nickname">{{ memberInfo.NiName }}</view>
      </view>
      <view v-if="hasLogin" class="logout" v-on:tap="logout"> 退出 </view>
    </view>

    <view class="m-c">
      <view class="i">
        <view class="t">0</view>
        <view class="v">积分</view>
      </view>
      <view class="i">
        <view class="t">0</view>
        <view class="v">会员余额</view>
      </view>
      <view class="i">
        <view class="t" v-on:tap="onCC">{{ m_couponList.length }}</view>
        <view class="v" v-on:tap="onCC">优惠券</view>
      </view>
    </view>

    <!-- order list -->
    <view class="o-c">
      <view class="o-h">我的订单</view>
      <view class="o-is">
        <view
          class="o-i"
          v-for="i in [
            {
              m_icon: `/static/images/my/dfk.png`,
              m_name: `待付款`,
              m_value: `1`,
            },
            {
              m_icon: `/static/images/my/dfh.png`,
              m_name: `待发货`,
              m_value: `2`,
            },
            {
              m_icon: `/static/images/my/dsh.png`,
              m_name: `待收货`,
              m_value: `3`,
            },
            {
              m_icon: `/static/images/my/tksh.png`,
              m_name: `退款售后`,
              m_value: `4`,
            },
          ]"
          :key="i.m_value"
          v-on:tap="onOC(i.m_value)"
        >
          <view>
            <image class="img" :src="i.m_icon" mode="widthFix" />
          </view>
          <view>{{ i.m_name }}</view>
        </view>
      </view>
    </view>

    <!-- tabs -->
    <view class="grid" v-for="(item, index) in baseList" :key="index">
      <view class="menu">
        <view
          class="item"
          v-for="(jm, jx) in item.list"
          :key="jx"
          @click="goto(jm.route)"
        >
          <image class="icon" mode="aspectFit" :src="jm.icon" />
          <text class="grid-text">{{ jm.title }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { onMounted, ref } from "@vue/composition-api";
import {
  uGetStorageSync,
  uNavigateTo,
  uSetStorageSync,
} from "../../utils/uniUtils";
import { reqPost } from "../../common/http.request";
import { useUser } from "../../store/useUser";
import { storeToRefs } from "pinia";

export default {
  name: "Setting",
  data() {
    return {
      baseList: [
        {
          list: [
            {
              icon: "/static/images/icon-member.png",
              title: "会员中心",
              route: "/pages/member/MemberIndex",
            },
            {
              icon: "/static/images/icon-address.png",
              title: "收货地址",
              route: "/pages/user/address/address",
            },
            {
              icon: "/static/images/icon-my-coupon.png",
              title: "我的优惠券",
              route: "/pages/coupon/MyCoupons",
            },
            /*   {
              icon: "/static/images/icon-my-coupon.png",
              title: "会员充值",
              route: "/pages/member/deposit",
            }, */
            /*            {
              icon: "/static/images/icon-bind.png",
              title: "会员邦定",
              route: "/pages/member/VipBind",
            }, */
            /*     {
              icon: "/static/images/icon-get-coupon.png",
              title: "领取优惠券",
              route: "/pages/coupon/GetCoupons",
            }, */
          ],
        },
      ],
      userInfo: null,
    };
  },
  mounted() {
    this.userInfo = uGetStorageSync("userInfo");
  },
  onShow: function () {
    this.memberInfo = uGetStorageSync("member");
    this.GetPageList();
  },
  setup(props) {
    const m_couponList = ref([]);
    const m_type = ref(0);
    const MemberId = uGetStorageSync("member").MemberId;
    const { hasLogin } = storeToRefs(useUser());
    const memberInfo = ref(uGetStorageSync("member"));
    onMounted(async function () {
      await GetPageList();
    });

    async function GetPageList() {
      if (!hasLogin.value) {
        return;
      }

      const { Data } = await reqPost("GetCouponList", {
        MemberId,
        type: m_type.value,
      });
      m_couponList.value = Data;
    }

    function onLC() {
      uNavigateTo("/pages/login/login");
      /*    
      if (uGetStorageSync("hasBindStore")) {
      } else {
        uToast("未绑定店铺~", "error");
      }
         */
    }

    function onCC() {
      uNavigateTo("/pages/coupon/MyCoupons");
    }

    function onOC(v) {
      uNavigateTo("/pages/order/OrderList?l=" + v);
    }

    function logout() {
      uSetStorageSync("hasLogin", false);
      useUser().hasLogin = false;
    }
    return {
      m_couponList,
      hasLogin,
      onLC,
      onCC,
      onOC,
      GetPageList,
      memberInfo,
      logout,
    };
  },
  methods: {
    goto(url) {
      uNavigateTo(url);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./scss/my.scss";
</style>
